<form id="paymentMethodForm" name="paymentMethodForm" method="post" class="styled_forms  modalForms">
  <p class="size18 float-left">Debit / Credit Card Information</p>
  <p class="float-right PadTop3 botMar0">
  <span class="redtxt font12" aria-hidden="true">*=Required</span>
  </p>
  <div class="ClearNew botMar0"></div>
  <div class="errorMsg box botMar20" id="errorPageDiv" style="display: none;">
    <p class="botMar0" id="errorUL"></p>
  </div>
  <input type="hidden" name="selectedMethodName" id="selectedMethodName" value="Add Credit/Debit Card">

  <div class="row-seamless botMar0 styled_forms  modalForms">

    <div class="tipPad  safariComp botMar15" style="overflow:hidden">
      <div class=" right MarRight5 float-left w150">
        <label class="rel top0">Method<span style="visibility:hidden" class="colorRed" aria-hidden="true">*</span></label>
      </div>

      <div class=" MarTop4  ie7MarTop0  helpDiv "><a href="#tipcr10" aria-describedby="tipcr10" class="lnk-help tooltips" title="" onclick="return false"><img src="/olam/images/brand30/global/icn-help.png" alt="Help "></a>
        <span class="tips" id="tipcr10">We accept the following forms of payment:<br><br>
          <strong>ATM debit cards</strong><br>
          STAR, Pulse, ACCEL, NYCE
          <br><br>
          <strong>Debit / credit cards</strong><br>
          Visa, MasterCard, American Express, Discover Network, JCB, Diners Club, AT&amp;T Universal
          <br><img src="/OLAM_PROD_CMS/English/images/brand30/olam_creditCards_PinlessCards.gif" height="110px;" alt="Pinless Cards" border="0"></span></div>

      <div class="float-left">
        <span class="statictxt top4px">
          Debit / credit card
        </span>
      </div>
      <div class="ClearNew"></div>
    </div>

    <div class="tipPad safariComp botMar20">
      <div class=" right MarRight5 float-left w150">
        <label class="rel top0 " for="paymentMethodForm.newCreditCardCustomerName">Name on card<span class="colorRed" aria-hidden="true">*</span></label>
      </div>
      <div class="MarTop3  ie7MarTop0  helpDiv">&nbsp;</div>
      <div id="divNameOnCard" class="MarBot0 PadRight2 float-left"><!-- for error case  MarBot0 PadRight2 error float-left -->
        <div class="emailInput">
          <span class="textInput-wrapper"><span class=""><input type="text" name="paymentMethodForm.newCreditCardCustomerName" maxlength="25" size="35" value="" onblur="validateNameOnCard(this.value, true)" class="popupinput text inline-error" id="paymentMethodForm.newCreditCardCustomerName" aria-required="true" aria-invalid="false"></span></span>
        </div>
        <div style="display: none;" id="" tabindex="0" class="focusable EmailAlertsDiv"><span style="display:block;height:0;width:0;color:transparent;z-index:-1;position:absolute" role="presentation">alert</span>
          <div class="email-error-top-image"></div>
          <div style="display:block;" class="email-error-mid-image" id="EmailAlert1">
            <p class="rederr-Msg font11imp lineHeight15  PadTop3imp" id="pNameOnCardErrorMessage"></p>
          </div>
          <!--
            <div class="email-error-mid-image" style="display:none;" id="EmailAlertMidPassDiv1">&nbsp;</div>
            <div class="email-error-mid-image" style="display:none;" id="EmailAlertMidPassDiv2">&nbsp;</div>
            <div style="display:none;" class="email-error-mid-image" id="EmailAlert2">
            <p class="rederr-Msg">Caps Lock on</p>
            </div> -->
            <div class="email-error-bot-image"></div>
        </div>
      </div>
      <div class="ClearNew"></div>
    </div>

    <div class="tipPad safariComp botMar20">
      <div class=" right MarRight5 float-left w150">
        <label class="rel top0 " for="paymentMethodForm.cardNumber">Card number<span class="colorRed" aria-hidden="true">*</span></label>
      </div>
      <div class=" MarTop3  ie7MarTop0  helpDiv ">&nbsp;</div>
      <div id="divCardNumber" class="MarBot0 PadRight2 float-left error"><!-- for error case  MarBot0 PadRight2 error float-left -->
        <div class="emailInput">
          <span class="textInput-wrapper"><span class=""><input type="text" name="paymentMethodForm.cardNumber" maxlength="19" size="35" value="" onkeypress="return validatePmtNumericKeyPress(event)" onblur="validateCardNumber(this.value, true)" class="popupinput inline-error text" id="paymentMethodForm.cardNumber" aria-required="true" aria-invalid="true"></span></span>
        </div>
        <div style="" id="" tabindex="0" class="focusable EmailAlertsDiv"><span style="display:block;height:0;width:0;color:transparent;z-index:-1;position:absolute" role="presentation">alert</span>
          <div class="email-error-top-image"></div>
          <div style="display:block;" class="email-error-mid-image" id="EmailAlert1">
            <p class="rederr-Msg font11imp lineHeight15  PadTop3imp" id="pCardNumberErrorMessage">Enter card number</p>
          </div>
          <!--
            <div class="email-error-mid-image" style="display:none;" id="EmailAlertMidPassDiv1">&nbsp;</div>
            <div class="email-error-mid-image" style="display:none;" id="EmailAlertMidPassDiv2">&nbsp;</div>
            <div style="display:none;" class="email-error-mid-image" id="EmailAlert2">
            <p class="rederr-Msg">Caps Lock on</p>
            </div> -->
            <div class="email-error-bot-image"></div>
        </div>
      </div>
      <div class="ClearNew"></div>
    </div>

    <div class="botMar30">
      <div class="float-left">
        <div class="tipPad  safariComp botMar20">
          <div class=" right MarRight5 float-left w150">
            <label class="rel top0" for="paymentMethodForm.cardVerificationNumber">Security code<span class="colorRed" aria-hidden="true">*</span></label>
          </div>
          <div class=" MarTop3 ie7MarTop0 helpDiv ">&nbsp; </div>
          <div id="divCVV" class="MarBot0 PadRight2 float-left error"><!-- for error case  MarBot0 PadRight2 error float-left -->
            <div class="emailInput">
              <span class="textInput-wrapper"><span class=""><input type="text" name="paymentMethodForm.cardVerificationNumber" maxlength="4" size="35" value="" onkeypress="return validatePmtNumericKeyPress(event)" onblur="validateCardVerificationValue(this.value, true)" class="popupinput inline-error text" id="paymentMethodForm.cardVerificationNumber" aria-required="true" aria-invalid="true"></span></span>
            </div>
            <div id="" style="" tabindex="0" class="focusable EmailAlertsDiv"><span style="display:block;height:0;width:0;color:transparent;z-index:-1;position:absolute" role="presentation">alert</span>
              <div class="email-error-top-image"></div>
              <div id="EmailAlert1" class="email-error-mid-image" style="display:block;">
                <p class="rederr-Msg font11imp lineHeight15  PadTop3imp" id="pCVVErrorMessage">Enter security code</p>
              </div>
              <!--
                <div id="EmailAlertMidPassDiv1" style="display:none;" class="email-error-mid-image">&nbsp;</div>
                <div id="EmailAlertMidPassDiv2" style="display:none;" class="email-error-mid-image">&nbsp;</div>
                <div id="EmailAlert2" class="email-error-mid-image" style="display:none;">
                <p class="rederr-Msg">Caps Lock on</p>
                </div> -->
                <div class="email-error-bot-image"></div>
            </div>
          </div>
          <div class="ClearNew"></div>
        </div>
        <div class="tipPad safariComp botMar20">
          <div class=" right MarRight5 float-left w150">
            <label class="rel top0 ">Card expiration date<span class="colorRed" aria-hidden="true">*</span></label>
          </div>
          <div class=" MarTop3  ie7MarTop0  helpDiv ">&nbsp;</div>
          <div class="Login_styled_forms fixSelect float-left">


            <div id="divExpirationMonth" class="MarBot0 float-left w138"><!-- class=" MarBot0 PadRight2 error float-left w138" -->
              <div id="divExpirationMonthSelect" class=""><!--for error case class="error-selector" -->
                <div class="selector" id="uniform-paymentMethodForm.expirationMonth"><span style="width: 75px;">04</span><select name="paymentMethodForm.expirationMonth" onblur="validateExpirationMonth(this.value, true)" class="inline-error jojoFix" id="paymentMethodForm.expirationMonth" title="Select month" aria-required="true" style="opacity: 0; width: 120px; height: 32px; top: 0px; left: -2px;"><!-- onchange="validateExpirationMonth(this.value, true) to make the consitent -->
                    <option value="" selected="selected">Select month</option>
                    <option value="01">01</option>
                    <option value="02">02</option>
                    <option value="03">03</option>
                    <option value="04">04</option>
                    <option value="05">05</option>
                    <option value="06">06</option>
                    <option value="07">07</option>
                    <option value="08">08</option>
                    <option value="09">09</option>
                    <option value="10">10</option>
                    <option value="11">11</option>
                    <option value="12">12</option></select></div>
              </div>
              <div id="divExpirationMonthErrorMessage" style="display:none;" tabindex="0" class="focusable"><span style="display:block;height:0;width:0;color:transparent;z-index:-1;position:absolute" role="presentation">alert</span>
                <p class="rederr-text bold PadLeft7 MarTop5 botMar0 font11imp w100 PadTop3imp" id="pExpirationMonthErrorMessage"></p>
              </div>
              <div class="ClearNew"></div>
            </div>

            <div id="divExpirationYear" class=" MarBot0 float-left w138">
              <div id="divExpirationYearSelect" class="">
                <div class="selector" id="uniform-paymentMethodForm.expirationYear"><span style="width: 65px;">2018</span><select name="paymentMethodForm.expirationYear" onblur="validateExpirationYear(this.value, true)" class="inline-error jojoFix" id="paymentMethodForm.expirationYear" title="Select year" aria-required="true" style="opacity: 0; width: 110px; height: 32px; top: 0px; left: -2px;"><!-- onchange="validateExpirationYear(this.value, true) to make the consitent -->
                    <option value="" selected="selected">Select year</option>
                    <option value="2015">2015</option>
                    <option value="2016">2016</option>
                    <option value="2017">2017</option>
                    <option value="2018">2018</option>
                    <option value="2019">2019</option>
                    <option value="2020">2020</option>
                    <option value="2021">2021</option>
                    <option value="2022">2022</option>
                    <option value="2023">2023</option>
                    <option value="2024">2024</option>
                    <option value="2025">2025</option>
                    <option value="2026">2026</option>
                    <option value="2027">2027</option>
                    <option value="2028">2028</option>
                    <option value="2029">2029</option></select></div>
              </div>

              <div id="divExpirationYearErrorMessage" style="display:none;" tabindex="0" class="focusable"><span style="display:block;height:0;width:0;color:transparent;z-index:-1;position:absolute" role="presentation">alert</span>
                <p class="rederr-text bold PadLeft7 MarTop5 botMar0 w100 font11imp PadTop3imp" id="pExpirationYearErrorMessage"></p>
              </div>
              <div class="ClearNew"></div>
            </div>
            <div class="ClearNew"></div>
          </div>
          <div class="ClearNew"></div>
        </div>
        <div class="tipPad safariComp">
          <div class=" right MarRight5 float-left w150">
            <label class="rel top0" for="paymentMethodForm.zip">Card billing ZIP Code<span class="colorRed" aria-hidden="true">*</span></label>
          </div>

          <div class=" MarTop3  ie7MarTop0  helpDiv "><!-- &nbsp; --><a href="#tip52" id="atip52" aria-describedby="tip52" class="lnk-help tooltips" title=""><img src="/olam/images/brand30/global/icn-help.png" alt="Help"></a>
            <span class="tips" id="tip52">Enter the ZIP Code of the credit cardholder's billing address.</span></div>


          <div id="divCardZipCode" class=" MarBot0 PadRight2 float-left"> <!--for error case  class=" MarBot0 PadRight2 error float-left"  -->
            <div class="emailInput">
              <span class="textInput-wrapper"><span><input type="text" name="paymentMethodForm.zip" maxlength="9" size="35" value="" onblur="validateCardZipCode(this.value, true)" class="popupinput inline-error text" id="paymentMethodForm.zip" aria-required="true"></span></span>
            </div>
            <div style="display:none;" id="" tabindex="0" class="focusable EmailAlertsDiv"><span style="display:block;height:0;width:0;color:transparent;z-index:-1;position:absolute" role="presentation">alert</span>
              <div class="email-error-top-image"></div>
              <div style="display:block;" class="email-error-mid-image" id="EmailAlert1">
                <p class="rederr-Msg font11imp lineHeight15  PadTop3imp" id="pCardZipCodeErrorMessage"></p>
              </div>
              <!--
                <div class="email-error-mid-image" style="display:none;" id="EmailAlertMidPassDiv1">&nbsp;</div>
                <div class="email-error-mid-image" style="display:none;" id="EmailAlertMidPassDiv2">&nbsp;</div>
                <div style="display:none;" class="email-error-mid-image" id="EmailAlert2">
                <p class="rederr-Msg">Caps Lock on</p>
                </div> -->
                <div class="email-error-bot-image"></div>
            </div>
          </div>
          <div class="ClearNew"></div>
        </div>
      </div>
      <div id="divCardImage" class="float-left focusable MarTopNeg15" tabindex="0"><!-- for error case class="float-left MarTopNeg15" -->
        <img class=" " border="0" src="/olam/English/brand30/img_card.png" alt="Code is 3 digits on the back, to the right. It's the 4 digits above account number for American Express.">
      </div>
      <div class="ClearNew"></div>
    </div>
  </div>
  <div style="display: none;" id="paymentMethodFormCustCode">
    <div class="row-seamless ">
      <div class="botMarOCDPA0 TopDotBorder PadTop18">
        <h3 class="font17">For Business, Corporate, or Purchasing Cardholders Only</h3>
      </div>
    </div>

    <div class="row-seamless botMar15 styled_forms  modalForms">
      <div class="botMar0 Padbot15"></div>
      <div class="tipPad safariComp ">
        <div class=" right MarRight5 float-left w253">
          <label class="rel top0" for="paymentMethodForm.custCode">Customer code</label>
        </div>

        <div class=" MarTop3  ie7MarTop0  helpDiv ">&nbsp;<a href="#tip53" id="atip53" class="lnk-help tooltips" aria-describedby="tip53"><img src="/olam/images/brand30/global/icn-help.png" alt="Help"></a>
          <span class="tips" id="tip53">Up to 17 characters of optional information that eligible business, purchasing, and corporate cardholders use to identify transactions on their Visa, MasterCard, or American Express statements.</span></div>

        <span class="textInput-wrapper"><span><input type="text" name="paymentMethodForm.custCode" maxlength="17" size="35" value="" onkeydown="return validateAlphaNumericKeyDown(event)" class="popupinput text" id="paymentMethodForm.custCode"></span></span>
      </div>
    </div>
  </div>
  <input type="hidden" name="paymentMethodForm.storePaymentProfileInd" value="N">

  <div class="btnInsideRowSeam botMar5" style="overflow:hidden">
    <div class="btnLt">
      <a href="#" title="Cancel" class="textLink" onclick="cancelMethod(&quot;Are you sure you want to cancel?&quot;);parent.enableNextBtn();">Cancel</a>
    </div>
    <div class="btnRt PadRight1 PadBot3">
      <a role="button" title="" class="button primary small" href="javascript:perfValidationBeforeSubmit('/pmt/addNewPayment.myworld','paymentMethodForm','payCommonActionForm')">Continue</a>
    </div>
    <div class="ClearNew"></div>
  </div>
</form>
